<template>
  <div id="container">
    <Header></Header>

    <div class="outer row" style="margin: 0 auto">
      <!--新布局-->
      <!-- 左侧主体内容 -->
      <section class="col-lg-9">


        <!--google廣告-->
        <div class="row" style="margin-top: 20px;">
          <div class="col-md-12">
            <div style="width:100%;text-align: center;clear: both;margin-bottom: 20px;" class="hidden-xs">
              <ins class="adsbygoogle"
                   style="display:block"
                   data-ad-client="ca-pub-8254913025324557"
                   data-ad-slot="1726967684"
                   data-ad-format="auto"
                   data-full-width-responsive="true"></ins>
              <!--<script>
                  (adsbygoogle = window.adsbygoogle || []).push({});
              </script>-->
            </div>
          </div>
        </div>

        <div class="timeline timeline-wrap">

          <div class="timeline-row timeline-row-major">
                     <span class="node"

                           style="    -webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;">
                       <i
                         class="fa fa-calendar">
                         @
                     </i>


                     </span>
            <h1 class="title">{{listQuery.tagName}}</h1>
          </div>

          <div class="timeline-row" v-for="item in list">
            <span class="node"></span>
            <div class="content">


              <h1 itemprop="name">
                <a class="timeline-article-title" style=" cursor: pointer" target="_blank"
                   itemprop="url" @click="view(item.id)">{{item.title}}</a>
              </h1>


              <div class="article-meta">

                <div class="article-date">
                  <i class="fa fa-calendar"></i>
                  <a style=" cursor: pointer">
                    <time datetime="2019-11-28T03:05:00.000Z" itemprop="datePublished">{{item.createDate}}</time>
                  </a>
                </div>


                <div class="article-category" style="text-transform: none;">
                  <i class="fa fa-folder"></i>分类：
                  <a style=" cursor: pointer" class="article-category-link"
                     @click="JumpCategory(item.cId,item.categoryName )">{{item.categoryName}}</a>
                </div>


                <div class="share-container" style="text-transform: none;">
                  标签
                  <i class="fa fa-tag"></i>
                  <a class="tag-link" style=" cursor: pointer" v-for="tag in item.tags">
                    <span    @click="JumpTags(tag.id,tag.tagname )">
                      {{tag.tagname}},
                    </span>
                  </a>
                </div>

              </div>
            </div>
          </div>


          <!--<div class="timeline-row">
            <span class="node"></span>
            <div class="content">


              <h1 itemprop="name">
                <a class="timeline-article-title" href="/1111-aliyun-tengxunyun-jdyun/" target="_blank"
                   itemprop="url">双十一虚拟机大促，主打机型大横评！</a>
              </h1>


              <div class="article-meta">

                <div class="article-date">
                  <i class="fa fa-calendar"></i>
                  <a href="/1111-aliyun-tengxunyun-jdyun/">
                    <time datetime="2019-10-28T13:53:00.000Z" itemprop="datePublished">2019-10-28</time>
                  </a>
                </div>


                <div class="share-container" style="text-transform: none;">
                  <i class="fa fa-tag"></i>
                  <a class="tag-link" href="/tags/优惠/">优惠</a>, <a class="tag-link" href="/tags/原创/">原创</a>
                </div>

              </div>
            </div>
          </div>-->

          <!--   <div class="timeline-row">
               <span class="node"></span>
               <div class="content">


                 <h1 itemprop="name">
                   <a class="timeline-article-title" href="/k8s-one-press-deploy/" target="_blank"
                      itemprop="url">再不努力提高效率，小姐姐都被人追走了：K8S一键部署了解一下？</a>
                 </h1>


                 <div class="article-meta">

                   <div class="article-date">
                     <i class="fa fa-calendar"></i>
                     <a href="/k8s-one-press-deploy/">
                       <time datetime="2019-10-25T01:22:00.000Z" itemprop="datePublished">2019-10-25</time>
                     </a>
                   </div>


                 </div>
               </div>
             </div>
   -->


        </div>

        <nav id="page-nav">
          <div class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total,prev, pager, next,jumper"
              :page-size="listQuery.pageSize"
              :page-sizes="[5,10,15]"
              :current-page.sync="listQuery.pageNum"
              :total="total">
            </el-pagination>
          </div>
        </nav>


      </section>

      <Aside></Aside>

      <!--布局左侧栏侧栏-->
      <foot></foot>


    </div>
  </div>
</template>

<script>


  import Aside from '../../components/aside/Aside'
  import Header from '../../components/header/Header'
  import Foot from '../../components/foot/Foot'
  import {articleList,listArticlesByTag} from '../../api/article'

  export default {

    components: {Header, Aside, Foot},

    mounted() {
      if (this.$route.query.id) {
        this.listQuery.tagName = this.$route.query.tagName;
        this.tagName = this.$route.query.tagName;
        this.listQuery.tagId = this.$route.query.id
      }
      this.getListByTag()
    },
    data() {
      return {
        tagName: null,
        total: 45,
        list: null,
        listQuery: {
          tagName: null,
          tagId:null,
          keyword: null,
          pageNum: 1,
          pageSize: 10,

        },
        article: {
          id: '',
          title: '',
          commentCounts: 0,
          viewCounts: 0,
          summary: '',
          author: {},
          tags: [],
          category: {},
          createDate: '',
          editor: {
            value: '',
            toolbarsFlag: false,
            subfield: false,
            defaultOpen: 'preview'
          }
        },
      }
    },
    methods: {
      JumpCategory(id, catogoryName) {
        this.$router.push({
          path: '/categories', query: {
            id: id,
            showName: catogoryName

          }
        })
      },
      JumpTags(id,tagName) {
        this.$router.push({
          path: '/tags', query: {
            id: id,
            tagName: tagName

          }
        })
      },
      getListByTag() {
        listArticlesByTag(this.listQuery).then(res => {
          this.list = res.data.list;
          this.total = res.data.total;
        })
      },
      handleSizeChange(val) {
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getListByTag();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getListByTag();
      },
      view(id) {
        this.$router.push({path: `/view/${id}`})
      }
    }
  }
</script>


<style type="text/css">

  pre {
    color: inherit;
    background-color: inherit;
  }
</style>

<style>
  #busuanzi_value_page_pv {
    color: #009688;
    font-weight: bold;
  }

  @media (min-width: 768px) {
    .copyright-left {
      float: left;
      width: 80%;
    }

    .copyright-right {
      float: left;
      width: 20%;
    }
  }

  .row {
    margin-top: 15px;
  }

  .index-card {
    padding: 15px;
    background: #fff;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  }

/*  .index-card-head {
    font-size: 1.3em;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eceff2;
    color: #009688;
  }*/

  .index-card-body {

  }

  .index-card-body-list {
    display: block;
    margin-bottom: 7px;
    justify-content: space-between;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .index-card-body-list a {
    color: grey;
    font-size: 15px;
    width: 80%;
  }

  .index-card-body-list a:hover {
    color: dodgerblue;
  }

  .media-body p {
    font-size: 13px;
    color: grey;
  }

</style>
